<!DOCTYPE html>
<html lang="zh">
<head>
    <title><{block name="title"}><{:isset($webConf.bs_title)?$webConf.bs_title:'BS后台管理'}><{/block}></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/static/adminlte/plugins/fontawesome-free/css/all.min.css?t=1">
    <link rel="stylesheet" href="/static/adminlte/plugins/fontawesome-free/css/fontawesome.min.css?t=1">
    <!-- overlayScrollbars -->
    <link rel="stylesheet" href="/static/adminlte/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/static/adminlte/css/adminlte.min.css">
    <!--自定义样式-->
    <link rel="stylesheet" href="/static/adminlte/css/bs/admin.css?t=<{:time()}>">
    <link rel="stylesheet" href="/static/adminlte/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="/static/adminlte/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <link rel="stylesheet" href="/static/adminlte/plugins/datatables-buttons/css/buttons.bootstrap4.min.css">
    <{block name="link"}><{/block}>
    <!--
    <div class="bs-loading-bg"><p class="bs-loading">Loading...</p></div>-->
    <style>
        table.table-bordered.dataTable tbody th, table.table-bordered.dataTable tbody td {
            vertical-align: middle !important;
        }
    </style>
    <{block name="style"}><{/block}>
</head>
<body class="hold-transition sidebar-mini layout-fixed ">
<!-- Site wrapper -->
<div class="wrapper">
    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
            </li>
            <li class="nav-item">
            <span class="nav-link change-frame" title="切换后台模式，iframe和单页"   role="button">
                <i class="fas fa-dice"></i>
            </span>
            </li>
            <!--  <li class="nav-item d-none d-sm-inline-block">
                  <a href="/static/adminlte/index3.html" class="nav-link">Home</a>
              </li>
              <li class="nav-item d-none d-sm-inline-block">
                  <a href="#" class="nav-link">Contact</a>
              </li>-->
        </ul>
        <{block name="top-nav"}><{/block}>
        <!-- Right navbar links -->
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
            <span class="nav-link" title="检测更新" onclick="check_update()"  role="button">
            <i class="fas fa-cloud-download-alt"></i>
            </span>
            </li>
            <li class="nav-item">
                <a class="nav-link" title="商城首页" href="<{:url('/mall/home/index')}>" target="_blank" role="button">
                    <i class="fas fa-home"></i>
                </a>
            </li>

            <li class="nav-item">
            <span class="nav-link" title="刷新" onclick="location.reload()"  role="button">
               <i class="fas fa-sync-alt"></i>
            </span>
            </li>



            <!-- Navbar Search -->
            <!--<li class="nav-item">
                <a class="nav-link" data-widget="navbar-search" href="#" role="button">
                    <i class="fas fa-search"></i>
                </a>
                <div class="navbar-search-block">
                    <form class="form-inline">
                        <div class="input-group input-group-sm">
                            <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
                            <div class="input-group-append">
                                <button class="btn btn-navbar" type="submit">
                                    <i class="fas fa-search"></i>
                                </button>
                                <button class="btn btn-navbar" type="button" data-widget="navbar-search">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </li>-->


            <!-- Messages Dropdown Menu -->
            <!-- <li class="nav-item dropdown">
                 <a class="nav-link" data-toggle="dropdown" href="#">
                     <i class="far fa-comments"></i>
                     <span class="badge badge-danger navbar-badge">3</span>
                 </a>
                 <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                     <a href="#" class="dropdown-item">
                         &lt;!&ndash; Message Start &ndash;&gt;
                         <div class="media">
                             <img src="/static/adminlte/img/user-d.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
                             <div class="media-body">
                                 <h3 class="dropdown-item-title">
                                     Brad Diesel
                                     <span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
                                 </h3>
                                 <p class="text-sm">Call me whenever you can...</p>
                                 <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
                             </div>
                         </div>
                         &lt;!&ndash; Message End &ndash;&gt;
                     </a>
                     <div class="dropdown-divider"></div>
                     <a href="#" class="dropdown-item">
                         &lt;!&ndash; Message Start &ndash;&gt;
                         <div class="media">
                             <img src="/static/adminlte/img/user-d.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
                             <div class="media-body">
                                 <h3 class="dropdown-item-title">
                                     John Pierce
                                     <span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
                                 </h3>
                                 <p class="text-sm">I got your message bro</p>
                                 <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
                             </div>
                         </div>
                         &lt;!&ndash; Message End &ndash;&gt;
                     </a>
                     <div class="dropdown-divider"></div>
                     <a href="#" class="dropdown-item">
                         &lt;!&ndash; Message Start &ndash;&gt;
                         <div class="media">
                             <img src="/static/adminlte/img/user-d.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
                             <div class="media-body">
                                 <h3 class="dropdown-item-title">
                                     Nora Silvester
                                     <span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
                                 </h3>
                                 <p class="text-sm">The subject goes here</p>
                                 <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
                             </div>
                         </div>
                         &lt;!&ndash; Message End &ndash;&gt;
                     </a>
                     <div class="dropdown-divider"></div>
                     <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
                 </div>
             </li>-->
            <!-- Notifications Dropdown Menu -->
            <li class="nav-item dropdown admin-msg-count-box">
                <a class="nav-link" data-toggle="dropdown" href="#">
                    <i class="far fa-bell"></i>
                    <span class="badge badge-danger navbar-badge total-count"></span>
                </a>
                <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right ">
                    <span class="dropdown-item dropdown-header"><span class="total-count">0</span> 未读消息</span>
                    <!--<div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">
                        <i class="fas fa-envelope mr-2"></i> 4 new messages
                        <span class="float-right text-muted text-sm">3 mins</span>
                    </a>-->

                    <div class="msg-list">

                    </div>

                    <div class="dropdown-divider"></div>
                    <a href="<{:url('/admin/index/msg')}>" class="dropdown-item dropdown-footer">查看所有消息</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-widget="fullscreen" href="#" role="button">
                    <i class="fas fa-expand-arrows-alt"></i>
                </a>
            </li>
            <li class="nav-item logout" title="退出">
                <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
                    <i class="fas fa-power-off"></i>
                </a>
            </li>
        </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <!--左侧菜单-->
    <{block name="left-menu"}>
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <a href="<{:url('/admin/index/index')}>" class="brand-link">
            系统管理后台 &nbsp;
            <span class="brand-text font-weight-light">
            <{:isset($webConf.version)?$webConf.version:'v1.0'}>
        </span>

        </a>

        <!-- Sidebar -->
        <div class="sidebar">

            <!-- Sidebar user (optional) -->
            <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                <div class="image">
                    <img src="/static/adminlte/img/user-d.jpg" class="img-circle elevation-2" alt="User Image">
                </div>
                <div class="info" style="color: white">
                    记得保持开心
                </div>
            </div>

            <!-- SidebarSearch Form -->
            <div class="form-inline">
                <div class="input-group" data-widget="sidebar-search">
                    <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search">
                    <div class="input-group-append">
                        <button class="btn btn-sidebar">
                            <i class="fas fa-search fa-fw"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Sidebar Menu -->
            <{if !empty($menu)}>

            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                    <{foreach $menu as $item}>
                    <{if $item.type==0}>
                    <?php continue;?>
                    <{/if}>

                    <li class="nav-item">
                        <a href="<{:url($item.url)}>" class="nav-link">
                            <i class="nav-icon fas <{$item.class_name}>"></i>
                            <p>
                                <{$item.name}>
                                <i class="right fas fa-angle-left"></i>
                                <{if $item.is_new}>
                                <span class="right badge badge-danger">New</span>
                                <{/if}>

                            </p>
                        </a>
                        <{if !empty($item.subcat)}>
                        <ul class="nav nav-treeview"  >
                            <{foreach $item.subcat as $sub}>
                            <{if $sub.type==0}>
                            <?php continue;?>
                            <{/if}>
                            <li class="nav-item">
                                <a href="<{:url($sub.url)}>" class="nav-link">
                                    <i class="nav-icon fas <{$sub.class_name}> "></i>
                                    <p><{$sub.name}>
                                        <!--<i class="right fas fa-angle-left"></i>-->
                                        <{if $sub.is_new}>
                                        <span class="right badge badge-danger">New</span>
                                        <{/if}>
                                    </p>
                                </a>
                                <!--三级菜单-->
                                <!-- <{if !empty($sub.subcat)}>
                                 <ul class="nav nav-treeview ">
                                     <{foreach $item.subcat as $three}>
                                     <{if $three.type==0}>
                                     <?php continue;?>
                                     <{/if}>
                                     <li class="nav-item">
                                         <a href="<{$three.url}>" class="nav-link">
                                             <i class="nav-icon fas <{$three.class_name}> "></i>
                                             <p><{$three.name}>
                                                 <{if $three.is_new}>
                                                 <span class="right badge badge-danger">New</span>
                                                 <{/if}>
                                             </p>
                                         </a>
                                     </li>
                                     <{/foreach}>
                                 </ul>
                                 <{/if}>-->
                                <!--三级菜单end-->
                            </li>
                            <{/foreach}>
                        </ul>
                        <{/if}>
                    </li>
                    <{/foreach}>
                    <{/if}>
                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->

    </aside>
    <{/block}>



    <!-- Content Wrapper. Contains page content -->
    <{block name="content"}>
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <!-- /.content -->
    </div>
    <{/block}>
    <!-- /.content-wrapper -->

    <footer class="main-footer">
        <div class="float-right d-none d-sm-block">
            <b>Version</b> 1.0-dev
        </div>
        <strong>Fork US <a target="_blank" href="https://gitee.com/brisklan/thinkphp5-shopping-mall">BS_SHOP</a></strong>
        <span><a target="_blank" href="http://bbs.bsshop.wei1.top/">讨论社区</a></span>
    </footer>


</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="/static/adminlte/plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="/static/adminlte/plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Bootstrap 4 -->
<script src="/static/adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- overlayScrollbars -->
<script src="/static/adminlte/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="/static/adminlte/js/adminlte.min.js"></script>
<!--引入layer.js-->
<script src="/static/adminlte/plugins/layer/layer.js"></script>
<!--引入自定义的js函数-->
<script src="/static/adminlte/plugins/bs/common.js"></script>
<!--jquery.form-->
<script src="/static/adminlte/plugins/bs/jquery.form.js"></script>
<!--和php同样的函数-->
<script src="/static/adminlte/plugins/bs/php.js"></script>
<!--<script src="/static/adminlte/plugins/bs/bsshop_websocket.js"></script>-->

<!--dataTables部分的js-->
<script src="/static/adminlte/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="/static/adminlte/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="/static/adminlte/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="/static/adminlte/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script src="/static/adminlte/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script src="/static/adminlte/plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
<script src="/static/adminlte/plugins/jszip/jszip.min.js"></script>
<script src="/static/adminlte/plugins/pdfmake/pdfmake.min.js"></script>
<script src="/static/adminlte/plugins/pdfmake/vfs_fonts.js"></script>
<script src="/static/adminlte/plugins/datatables-buttons/js/buttons.html5.min.js"></script>
<script src="/static/adminlte/plugins/datatables-buttons/js/buttons.print.min.js"></script>
<script src="/static/adminlte/plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
<{block name="script-src"}><{/block}>
<script>
    function notice_logic(data){
        // console.log(data.level)
        var content;
        if (data.level == 'error') {
            class_name = 'alert-warning ';
        } else if (data.level == 'danger') {
            class_name = 'alert-danger'
        } else if (data.level == 'info') {
            class_name = 'alert-info'
        } else if (data.level == 'warning') {
            class_name = 'alert-warning'
        } else {
            class_name = 'alert-success'
        }
        content = '<div class="alert '+class_name+' bs-notice-item-'+data.time+'"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'+data.msg+'</div>';
        $(".bs-notice").append(content)
        setTimeout(function () {
            $(".bs-notice-item-"+data.time).remove()
        },7000)

    }

    var lockReconnect = false;//避免重复连接
    var ws = null; //WebSocket的引用
    var wsUrl = "127.0.0.1:7276"; //这个要与后端提供的相同
    //创建WebSocket连接,如果不确定浏览器是否支持，可以使用socket.js做连接
    function createWebSocket(url){
        try {
            if ('WebSocket' in window) {
                ws = new WebSocket("ws://" + url + "");
            }
            initEventHandle();
        } catch (e) {
            reconnect(wsUrl);
        }
    }

    //初始化
    function initEventHandle() {
        // 连接成功建立后响应
        ws.onopen = function() {
            console.log("成功连接到" + wsUrl);
            //特殊标识，用于指定推送
            ws.send("admin|common|notice")
            //心跳检测重置
            heartCheck.reset().start();
        }
        // 收到服务器消息后响应
        ws.onmessage = function(e) {
            //如果获取到消息，心跳检测重置
            //拿到任何消息都说明当前连接是正常的
            heartCheck.reset().start();
            //Json转换成Object
            //console.log(e.data)
            var msg = e.data;

            if(msg.message === "connect_ok"){
                //忽略心跳的信息，因为只要有消息进来，断线重连就会重置不会触发
                // console.log('heart check status',msg.message)
            }else{
                //处理消息的业务逻辑
                if (isJSON(msg)){
                    msg = $.parseJSON(msg);
                    console.log(msg)
                    if (msg.type && msg.type == 'notices'){
                        notice_logic(msg)
                    }
                }

            }
        }

        // 连接关闭后响应
        ws.onclose = function() {
            console.log("关闭连接");
            reconnect(wsUrl);//重连
        }
        ws.onerror = function () {
            reconnect(wsUrl);//重连
        };
    }

    //心跳检测
    var heartCheck = {
        timeout: 15000,//毫秒
        timeoutObj: null,
        serverTimeoutObj: null,
        reset: function(){
            clearTimeout(this.timeoutObj);
            clearTimeout(this.serverTimeoutObj);
            return this;
        },
        start: function(){
            var self = this;
            this.timeoutObj = setTimeout(function(){
                //这里发送一个心跳，后端收到后，返回一个心跳消息，
                //onmessage拿到返回的心跳就说明连接正常
                ws.send("bsshop_check");
                console.log("heart check");
                self.serverTimeoutObj = setTimeout(function(){
                    //如果超过一定时间还没重置，说明后端主动断开了
                    ws.close();//如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
                }, self.timeout)
            }, this.timeout)
        }
    }

    // 强制退出
    window.onunload = function() {
       if (ws){ ws.close();}
    }
    //createWebSocket(wsUrl);

    function reconnect(url) {
        if (lockReconnect) return;
        lockReconnect = true;
        //没连接上会一直重连，设置延迟避免请求过多
        setTimeout(function () {
            createWebSocket(url);
            console.log("正在重连，当前时间" + new Date())
            lockReconnect = false;
        }, 5000); //这里设置重连间隔(ms)
    }
    $(document).ready(function () {

        // bs_websocket("ws://127.0.0.1:7276");


    })
</script>
<script>
    //选中菜单的颜色
    $(document).ready(function() {
        $(".logout").on('click',function () {
            layer.confirm('确定要退出后台吗？',{title:0},function () {
                location.href = "<{:url('/admin/account/logout')}>"
            })
        })

        /** add active class and stay opened when selected */
        var url = window.location;
        // for sidebar menu entirely but not cover treeview
        $('ul.nav-sidebar a').filter(function() {
            return this.href == url;
        }).addClass('active');
        // for treeview
        $('ul.nav-treeview a').filter(function() {
            return this.href == url;
        }).parentsUntil(".nav-sidebar > .nav-treeview").addClass('menu-open').prev('a').addClass('active');
        /*切换框架模式*/
        if ($(".change-frame").length>0){
            $(".change-frame").on('click',function () {
                url = "<{:url('/admin/index/index')}>";
                sendData(url,{from:'change-frame'},function (res) {
                    if (res.code==0){
                        if (res.data.type=='single_page'){
                            self.location = res.data.url
                        }else {
                            self.location = res.data.url
                        }
                    }
                },true,true)
            });
        }
        if ($(".admin-msg-count-box").length>0){
            setInterval(function () {
                check_msg();
            },30000)

        }

        check_msg();
    })

    function check_msg() {
        sendData("<{:url('/admin/index/msg_count')}>",{},function (res) {
            if (res.code==0){
                var $box = $(".admin-msg-count-box")[0];
                $($box).find('.total-count').text(res.data.total>0?res.data.total:'')

                var $listListDiv = $($box).find('.msg-list');
                $($listListDiv).empty();
                if (res.data.total>0){
                    for (var i=0;i<res.data.msg_list.length;i++){
                        $($listListDiv).append('<div class="dropdown-divider"></div>\n' +
                            '                <a href="<{:url(\'/admin/index/msg\')}>" class="dropdown-item">\n' +
                            '                    <i class="fas '+res.data.msg_list[i].icon+' mr-2"></i> '+res.data.msg_list[i].total+' '+res.data.msg_list[i].msg_type_desc+'\n' +
                            '                    <span class="float-right text-muted text-sm"></span>\n' +
                            '                </a')
                    }
                }



            }
        },true,true)
    }
    let new_version = null;
    function check_update(init){
        var c;
        sendData("<{:url('/admin/index/check_update')}>",{},function (res) {
            if (res.code==0){
                if (res.data.status==0){
                    if (init) return;
                }else{
                    new_version = res.data.new;
                    c = '<div class="card card-default">\n' +
                        '              <div class="card-body">\n' +
                        '                <div class="alert alert-info alert-dismissible">\n' +
                        '                  <h5><i class="icon fas fa-download"></i> 当前有可以更新的版本！</h5>\n' +
                        '                 <p class="version" style="width: unset !important;">当前版本v'+res.data.version+'，最新版v'+res.data.new.version+'</p>'+
                        '                  请及时更新，为保证安全建议先备份数据库和文件以免更新错误导致数据丢失问题，请在系统不忙碌的时候更新。在线更新功能对当前版本的备份文件在runtime/tmp/对应的版本下面，有问题可以手动还原\n' +
                        '                </div>\n ' +'<h5>更新内容：</h5>'+res.data.new.content+
                        '              </div>\n' +

                        '        <div class="card-footer" style="text-align: right"> ' +
                        '<span class="btn btn-info"  onclick="layer.closeAll()">取消</span>' +
                        '<span class="btn btn-success bs-left-30" onclick="app_update()">更新</span>' +
                        '</div> </div>' +
                        '<style>p.version {color: red;background: #ffeb3b;text-align: center;width: 180px;margin: 0 auto;}</style>'
                }

                return  layer.open({
                    type: 1,
                    title: '[BS_SHOP]-版本更新',
                    area: '55%',
                    shadeClose: false,
                    skin: 'layui-layer-dialog',
                    closeBtn: 2,
                    content: c
                });

            }else {
                if (!init){
                    c = '<div class="card card-default">\n' +
                        '              <div class="card-body">\n' +
                        '                <div class="alert alert-success alert-dismissible">\n' +

                        '                  <h5><i class="icon fas fa-check"></i> 当前已是最新版 v'+res.data.version+' </h5>\n' +
                        '                  您已使用最新版，无需更新！\n' +
                        '                </div>\n' +
                        '              </div>\n' +

                        '        <div class="card-footer" style="text-align: right"> ' +
                        '<span class="btn btn-info"  onclick="layer.closeAll()">取消</span>' +
                        '</div> </div>';
                    return  layer.open({
                        type: 1,
                        title: '[BS_SHOP]-版本更新',
                        area: '55%',
                        shadeClose: false,
                        skin: 'layui-layer-dialog',
                        closeBtn: 2,
                        content: c
                    });
                }
            }
        },true,true)



    }

    function app_update(){
        layer.closeAll();
        sendData("<{:url('/admin/index/start_update')}>", {info:new_version},function (res) {
            if (res.code !=0){
                return layer.msg(res.msg,{icon:5})
            }
            location.reload();
        });
    }
</script>
<{block name="script"}><{/block}>
</body>
</html>
